<template>
  <div class="js-query">
    <input type="text" v-model="searchTerm" placeholder="输入查询条件..." />
    <button @click="performSearch">查询</button>
    <ul v-if="results.length > 0">
      <li v-for="(result, index) in results" :key="index">{{ result }}</li>
    </ul>
    <p v-else>暂无结果。</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const searchTerm = ref('')
const results = ref<string[]>([])

const performSearch = () => {
  // 模拟查询逻辑
  if (searchTerm.value.trim() !== '') {
    results.value = [`结果1: ${searchTerm.value}`, `结果2: ${searchTerm.value}`]
  } else {
    results.value = []
  }
}
</script>

<style scoped>
.js-query {
  padding: 1rem;
}
</style>